<template>
	<view class="big-text" :class="{ 'show-tips': showTip }">
		<input class="text" :value="getValue" @focus="focus = true" @blur="focus = false" :maxlength="maxLength" @input="handler" />
		<view v-if="showTip" class="tips" :class="{ show: showTip && focus }">
			<text class="current">{{ getCurrent }}</text>
			<text>/</text>
			<text class="total">{{ getTotal }}</text>
		</view>
		<view v-if="disabled" class="mask"></view>
	</view>
</template>

<script>
export default {
	props: {
		value: { type: String, default: '' },
		maxLength: { type: Number, default: 18 },
		showTip: { type: Boolean, default: true },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return { focus: false };
	},
	mounted() {},
	computed: {
		getValue() {
			return this.value;
		},
		getTotal() {
			return this.maxLength;
		},
		getCurrent() {
			return this.value ? this.value.length : 0;
		}
	},
	methods: {
		handler(e) {
			this.$emit('input', e.detail.value);
		}
	}
};
</script>

<style lang="less" scoped>
input:disabled {
	opacity: 1 !important;
}
.big-text {
	width: 100%;
	position: relative;
	.mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	.text {
		position: relative;
		height: 46rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #8a8c8d;
		line-height: 46rpx;
		text-align: center;
		width: 100%;
	}
	.tips {
		text-align: right;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 8rpx;
		color: #a1a1a1;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10rpx;
		display: none;
		.current {
			margin-right: 4rpx;
		}
		.total {
			margin-left: 4rpx;
			font-weight: 500;
		}
		&.show {
			display: block;
		}
	}
}
</style>
